<template>
  <el-container class="wrapper">
    <el-aside width="200px">
      <el-tree 
      :data="data" 
      default-expand-all 
      @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <span>{{ data.label }}</span>
        </template>
      </el-tree>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>


<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const data = ref([
  {
    label: "会员中心",
    children: [
      { label: "个人资料", path: "/user" },
      { label: "密码修改", path: "/password-change" },
      { label: "我的收藏", path: "/my-collection" }
    ]
  },
  {
    label: "订单中心",
    children: [
      { label: "我的订单", path: "/my-orders" }
    ]
  },
  {
    label: "钱包管理",
    children: [
      { label: "充值", path: "/recharge" },
      { label: "转账", path: "/transfer" },
      { label: "消费记录", path: "/consumption-record" }
    ]
  }
]);

const router = useRouter();

const handleNodeClick = (nodeData) => {
  if (nodeData.path) {
    router.push(nodeData.path);
  }
};
</script>

<style lang="scss">
.wrapper {
  height: 100vh;
  .el-tree-node__content{
    padding: 25px 0px;
    margin-left:40px;
  }
}

</style>
